<template>
	<view class="pages">
		<image :src="info.imageUrl" class="goods-img"></image>
		
		<view class="procss"></view>
		<view class="detail-title">订单详情</view>
		
		<view class="detail-item">
			<view>专场名称</view>
			<view>{{info.goodsName}}</view>
		</view>
		<!-- <view class="detail-item">
			<view>数量</view>
			<view>{{info.quantity}}</view>
		</view> -->
		<view class="detail-item">
			<view>起始价</view>
			<view>{{info.startPrice}}</view>
		</view>
		<view class="detail-item">
			<view>增长比例</view>
			<view>{{info.percent}}%</view>
		</view>
		<view class="detail-item">
			<view>提货价</view>
			<view>{{info.endPrice}}</view>
		</view>
		<view class="detail-item">
			<view>市场价</view>
			<view>{{info.price}}</view>
		</view>
		<!-- <view class="detail-item">
			<view>最新成交日期</view>
			<view>{{info.lastDate}}</view>
		</view>
		<view class="detail-item">
			<view>最新成交价格</view>
			<view>{{info.lastPrice}}</view>
		</view> -->
		<view class="detail-item">
			<view>期数</view>
			<view>{{info.sellProgress}}</view>
		</view>
		
	</view>
</template>

<script>
	import { myGoodsDetail } from '../../api/api.js'
	export default {
		data() {
			return {
				id:'',
				info:'',
				num:1,
				html:'',
			}
		},
		onLoad(e) {
			this.id = e.id
			// 获取商品详情
			this.getDetail()
		},
		
		methods: {
			
			// 获取商品详情
			getDetail() {
				let data = {
					id:this.id
				}
				myGoodsDetail(data).then( res=> {
					this.info = res.data
					this.bugPrice = this.info.nowPrice
					var regex = new RegExp('<img ', 'gi')
					this.html = this.info.detail.replace(regex, '<img style="width: 100%;" ');
				})
			},
		}
	}
</script>

<style lang="less">
    .pages {
		padding-bottom: 200rpx;
		.goods-img {
			width: 750rpx;
			height: 750rpx;
		}
		.title {
			margin: 24rpx 0 12rpx 30rpx;
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
		}
		.price {
			width: 690rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 40rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #d80202;
			span {
				font-size: 24rpx
			}
			.time {
				display: flex;
				align-items: center;
				color:#FE3B33;
				font-size: 28rpx;
				.time-content {
					display: flex;
					align-items: center;
					view {
						margin-left: 15rpx;
						text-align: center;
						line-height: 52rpx;
						width: 52rpx;
						height: 52rpx;
						background: #FE3B33;
						border-radius: 10rpx;
						opacity: 0.84;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						color: #FFFFFF;
					}
				}
			}
		}
		.detail-item {
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #808080;
			margin-top: 30rpx;
			width: 690rpx;
			display: flex;
			justify-content: space-between;
			view:first-child{
				white-space: nowrap;
				width: max-content;
				
			}
			view:last-child{
				width: 500rpx;
				text-align: right;
				line-height: 40rpx;
			}
			
		}
		
		.changes {
			margin: 12rpx 0 0 120rpx;
			text-align: center;
			width: 200rpx;
			height: 50rpx;
			line-height: 50rpx;
			background: #F2F2F2;
			border-radius: 4rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;
		}
		.procss {
			margin-top: 30rpx;
			width: 750rpx;
			height: 10rpx;
			background: #F5F5F5;
		}
		.detail-title {
			margin: 40rpx 0 0 30rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 50rpx;
		}
		
	}
</style>
